<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        1.流体容器
        2.固定容器使用时需要给标签添加类container
                        阈值                           width
                大于等于1200(lg 大屏pc)            1170（1140+槽宽）
            大于等于992(md 中屏pc)小于1200          970（940+槽宽）
            大于等于768(sm 平板)小于992             750（720+槽宽）
                小于768(xs 移动手机)                    auto
        3.栅格系统
            在bootstrap中默认会把栅格一行分成十二块，
            语法方式：例子：
                <div class="container">
                    <div class="row">
                        <div class="col-lg-2">col-lg-2</div>
                        <div class="col-lg-10">col-lg-10</div>
                    </div>
                </div>
            当我们执行改代码时会发现一行被等比的分成了12份，其中第一个div占用了两份，第二个div占用了一份
     -->
</body>

</html>